<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechZone - 现代电子设备商城</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <style>
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .content-container { max-width: 1200px; margin: 0 auto; }
        .hero-slide { height: 500px; }
        .category-card:hover { transform: translateY(-5px); }
        .product-card { transition: all 0.3s ease; }
        .product-card:hover { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
        .btn-primary { background-color: #3b82f6; }
        .btn-primary:hover { background-color: #2563eb; }
        .btn-secondary { border: 2px solid #3b82f6; color: #3b82f6; }
        .btn-secondary:hover { background-color: #dbeafe; }
        .nav-link { position: relative; }
        .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: #3b82f6; transition: width 0.3s ease; }
        .nav-link:hover::after { width: 100%; }
        .nav-link.active::after { width: 100%; }
        
        /* 搜索相关样式 */
        .search-results { display: none; }
        .search-results.active { display: block; }
        .search-overlay { background-color: rgba(0, 0, 0, 0.5); }
        .search-input-container { position: relative; }
        .search-suggestions { 
            position: absolute; 
            top: 100%; 
            left: 0; 
            right: 0; 
            background: white; 
            border-radius: 0 0 1rem 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 10;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 2px;
        }
        .search-suggestion-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .search-suggestion-item:hover {
            background-color: #f3f4f6;
        }
        .search-highlight {
            font-weight: bold;
            color: #3b82f6;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-gray-900 text-white z-50 shadow-md">
        <div class="content-container flex items-center justify-between py-4">
            <div class="flex items-center">
                <span class="iconify text-3xl mr-2" data-icon="ion:hardware-chip"></span>
                <h1 class="text-xl font-bold">TechZone</h1>
            </div>
            
            <div class="flex space-x-8">
                <a href="index.html" class="nav-link active">首页</a>
                <a href="mobile.html" class="nav-link">手机</a>
                <a href="computer.html" class="nav-link">电脑</a>
                <a href="headphones.html" class="nav-link">耳机</a>
                <a href="wearable.html" class="nav-link">智能穿戴</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="search-input-container relative">
                    <input type="text" id="search-input" placeholder="搜索产品..." class="px-4 py-2 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
                    <button id="search-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
                        <span class="iconify" data-icon="mdi:search"></span>
                    </button>
                    <!-- 搜索建议下拉框 -->
                    <div id="search-suggestions" class="search-suggestions hidden"></div>
                </div>
                <!-- 个人中心按钮 -->
                <button id="profile-btn" class="flex items-center hover:text-blue-400 transition-colors">
                    <span class="iconify text-xl" data-icon="mdi:account"></span>
                </button>
                <!-- 购物车按钮 -->
                <button id="cart-btn" class="flex items-center hover:text-blue-400 transition-colors relative">
                    <span class="iconify text-xl" data-icon="mdi:cart"></span>
                    <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center hidden">0</span>
                </button>
            </div>
        </div>
    </nav>

    <!-- 搜索结果弹窗 -->
    <div id="search-modal" class="fixed inset-0 z-50 flex items-start justify-center pt-24 px-4 hidden">
        <div class="search-overlay absolute inset-0" id="search-overlay"></div>
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[80vh] overflow-y-auto relative z-10">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-2xl font-bold">搜索结果: <span id="search-term" class="text-blue-600"></span></h3>
                    <button id="close-search" class="text-gray-500 hover:text-gray-800">
                        <span class="iconify text-2xl" data-icon="mdi:close"></span>
                    </button>
                </div>
                <p id="search-results-count" class="text-gray-500 mt-1"></p>
            </div>
            <div id="search-results-container" class="p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 搜索结果将在这里动态显示 -->
            </div>
            <div id="no-results" class="p-12 text-center hidden">
                <span class="iconify text-6xl text-gray-300 mb-4" data-icon="mdi:search-off"></span>
                <p class="text-xl text-gray-500">未找到匹配的产品</p>
                <p class="text-gray-400 mt-2">请尝试其他搜索关键词</p>
            </div>
        </div>
    </div>

    <!-- 巨型轮播图 -->
    <div class="mt-16 relative">
        <div id="fullwidth-carousel" class="relative overflow-hidden">
            <!-- 轮播容器 -->
            <div id="fullwidth-slides" class="flex transition-transform duration-500 ease-in-out">
                <!-- 轮播图片1 -->
                <div class="fullwidth-slide min-w-full">
                    <img src="images/banner/1FCB3C4FBC34DA9A412701E7DD911D89.jpg" alt="轮播图片1" class="w-full h-[500px] object-cover">
                </div>
                
                <!-- 轮播图片2 -->
                <div class="fullwidth-slide min-w-full">
                    <img src="images/banner/D1F5A77543701DD473E2711400EC2E48.jpg" alt="轮播图片2" class="w-full h-[500px] object-cover">
                </div>
                
                <!-- 轮播图片3 -->
                <div class="fullwidth-slide min-w-full">
                    <img src="images/banner/910FA9A1A0206C95F8A1820DEBBC164E.jpg" alt="轮播图片3" class="w-full h-[500px] object-cover">
                </div>
                
                <!-- 轮播图片4 -->
                <div class="fullwidth-slide min-w-full">
                    <img src="images/banner/F3AACC3707D8D8CA396D44D6E9A1479B.jpg" alt="轮播图片4" class="w-full h-[500px] object-cover">
                </div>
            </div>
            
            <!-- 轮播指示器 -->
            <div id="fullwidth-indicators" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
                <button class="w-3 h-3 rounded-full bg-white transition-all duration-300" data-index="0"></button>
                <button class="w-3 h-3 rounded-full bg-white opacity-50 transition-all duration-300" data-index="1"></button>
                <button class="w-3 h-3 rounded-full bg-white opacity-50 transition-all duration-300" data-index="2"></button>
                <button class="w-3 h-3 rounded-full bg-white opacity-50 transition-all duration-300" data-index="3"></button>
            </div>
            
            <!-- 左右控制按钮 -->
            <button id="fullwidth-prev" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white p-3 rounded-full transition-all duration-300">
                <span class="iconify text-2xl" data-icon="mdi:chevron-left"></span>
            </button>
            <button id="fullwidth-next" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white p-3 rounded-full transition-all duration-300">
                <span class="iconify text-2xl" data-icon="mdi:chevron-right"></span>
            </button>
        </div>
    </div>

    <!-- 全屏单图轮播控制脚本 -->
    <script>
        // 全屏单图轮播功能实现
        document.addEventListener('DOMContentLoaded', function() {
            const slidesContainer = document.getElementById('fullwidth-slides');
            const slides = document.querySelectorAll('.fullwidth-slide');
            const indicators = document.querySelectorAll('#fullwidth-indicators button');
            const prevBtn = document.getElementById('fullwidth-prev');
            const nextBtn = document.getElementById('fullwidth-next');
            let currentIndex = 0;
            const slideCount = slides.length;
            let autoplayInterval;
            
            // 初始化轮播
            function initFullwidthCarousel() {
                // 点击指示器切换
                indicators.forEach(indicator => {
                    indicator.addEventListener('click', function() {
                        const index = parseInt(this.getAttribute('data-index'));
                        goToSlide(index);
                        resetAutoplay();
                    });
                });
                
                // 左右按钮点击切换
                prevBtn.addEventListener('click', () => {
                    prevSlide();
                    resetAutoplay();
                });
                nextBtn.addEventListener('click', () => {
                    nextSlide();
                    resetAutoplay();
                });
                
                // 启动自动播放
                startAutoplay();
                
                // 鼠标悬停时暂停自动播放
                document.getElementById('fullwidth-carousel').addEventListener('mouseenter', pauseAutoplay);
                document.getElementById('fullwidth-carousel').addEventListener('mouseleave', startAutoplay);
            }
            
            // 切换到指定幻灯片
            function goToSlide(index) {
                currentIndex = index;
                // 计算偏移量（100%为一张图片的宽度）
                const offset = -currentIndex * 100;
                slidesContainer.style.transform = `translateX(${offset}%)`;
                updateIndicators();
            }
            
            // 上一张幻灯片
            function prevSlide() {
                currentIndex = (currentIndex - 1 + slideCount) % slideCount;
                goToSlide(currentIndex);
            }
            
            // 下一张幻灯片
            function nextSlide() {
                currentIndex = (currentIndex + 1) % slideCount;
                goToSlide(currentIndex);
            }
            
            // 更新指示器状态
            function updateIndicators() {
                indicators.forEach((indicator, index) => {
                    if (index === currentIndex) {
                        indicator.classList.remove('opacity-50');
                        indicator.classList.add('opacity-100', 'w-8');
                    } else {
                        indicator.classList.remove('opacity-100', 'w-8');
                        indicator.classList.add('opacity-50');
                    }
                });
            }
            
            // 开始自动播放
            function startAutoplay() {
                autoplayInterval = setInterval(nextSlide, 5000); // 每5秒切换一次
            }
            
            // 暂停自动播放
            function pauseAutoplay() {
                clearInterval(autoplayInterval);
            }
            
            // 重置自动播放计时器
            function resetAutoplay() {
                pauseAutoplay();
                startAutoplay();
            }
            
            // 初始化轮播
            initFullwidthCarousel();
        });
    </script>
    

    <!-- 特色商品分类网格 -->
    <section class="py-16">
        <div class="content-container">
            <h2 class="text-3xl font-bold mb-10 text-center">热门产品分类</h2>
            
            <div class="grid grid-cols-4 gap-8">
                <!-- 手机分类 -->
                <div class="category-card bg-white rounded-lg shadow-md p-6 text-center transition-transform">
                    <div class="bg-gray-100 rounded-full p-4 w-24 h-24 mx-auto flex items-center justify-center">
                        <span class="iconify text-4xl text-blue-500" data-icon="mdi:cellphone"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">智能手机</h3>
                    <p class="text-gray-600 mt-2">最新旗舰与性价比之选</p>
                    <a href="mobile.html" class="btn-secondary mt-4 px-6 py-2 rounded-full font-medium transition-colors inline-block">查看全部</a>
                </div>
                
                <!-- 电脑分类 -->
                <div class="category-card bg-white rounded-lg shadow-md p-6 text-center transition-transform">
                    <div class="bg-gray-100 rounded-full p-4 w-24 h-24 mx-auto flex items-center justify-center">
                        <span class="iconify text-4xl text-blue-500" data-icon="mdi:laptop"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">笔记本电脑</h3>
                    <p class="text-gray-600 mt-2">轻薄本与游戏本全系列</p>
                    <a href="computer.html" class="btn-secondary mt-4 px-6 py-2 rounded-full font-medium transition-colors inline-block">查看全部</a>
                </div>
                
                <!-- 耳机分类 -->
                <div class="category-card bg-white rounded-lg shadow-md p-6 text-center transition-transform">
                    <div class="bg-gray-100 rounded-full p-4 w-24 h-24 mx-auto flex items-center justify-center">
                        <span class="iconify text-4xl text-blue-500" data-icon="mdi:headphones"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">耳机</h3>
                    <p class="text-gray-600 mt-2">无线与降噪技术</p>
                    <a href="headphones.html" class="btn-secondary mt-4 px-6 py-2 rounded-full font-medium transition-colors inline-block">查看全部</a>
                </div>
                
                <!-- 智能穿戴分类 -->
                <div class="category-card bg-white rounded-lg shadow-md p-6 text-center transition-transform">
                    <div class="bg-gray-100 rounded-full p-4 w-24 h-24 mx-auto flex items-center justify-center">
                        <span class="iconify text-4xl text-blue-500" data-icon="mdi:watch"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">智能穿戴</h3>
                    <p class="text-gray-600 mt-2">手表与健康监测设备</p>
                    <a href="wearable.html" class="btn-secondary mt-4 px-6 py-2 rounded-full font-medium transition-colors inline-block">查看全部</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 精选产品展示区 -->
    <section class="py-16 bg-gray-100">
        <div class="content-container">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-3xl font-bold">热销产品</h2>
            </div>
            
            <div class="flex space-x-6 overflow-x-auto hide-scrollbar pb-4">
                <!-- 产品卡片 1 - 旗舰智能手机 X Pro -->
                <div class="product-card bg-white rounded-xl shadow-md p-6 min-w-[300px]">
                    <img src="images/products/7031297F1A936F9A0C6B61AE41AB1C4D.jpg" alt="旗舰智能手机 X Pro，配备三摄和全面屏" class="w-full h-48 object-contain mb-4">
                    <h3 class="text-xl font-semibold">旗舰智能手机 X Pro</h3>
                    <p class="text-gray-600 mt-2">6.7英寸AMOLED屏 | 骁龙8 Gen2 | 1亿像素三摄</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold">¥5999</span>
                        <button class="add-to-cart-btn btn-primary px-6 py-2 rounded-full text-white font-medium"
                                data-id="101" 
                                data-name="旗舰智能手机 X Pro" 
                                data-price="5999" 
                                data-image="images/products/7031297F1A936F9A0C6B61AE41AB1C4D.jpg">
                            购买
                        </button>
                    </div>
                </div>
                
                <!-- 产品卡片 2 - 轻薄笔记本电脑 Air -->
                <div class="product-card bg-white rounded-xl shadow-md p-6 min-w-[300px]">
                    <img src="images/products/BB460B0B588041CFD4C93FAD72A68F46.jpg" alt="轻薄笔记本电脑 Air，银色金属机身" class="w-full h-48 object-contain mb-4">
                    <h3 class="text-xl font-semibold">轻薄笔记本电脑 Air</h3>
                    <p class="text-gray-600 mt-2">13.3英寸2K屏 | i7处理器 | 16GB内存 | 1TB SSD</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold">¥7999</span>
                        <button class="add-to-cart-btn btn-primary px-6 py-2 rounded-full text-white font-medium"
                                data-id="102" 
                                data-name="轻薄笔记本电脑 Air" 
                                data-price="7999" 
                                data-image="images/products/BB460B0B588041CFD4C93FAD72A68F46.jpg">
                            购买
                        </button>
                    </div>
                </div>
                
                <!-- 产品卡片 3 - 降噪无线耳机 Pro -->
                <div class="product-card bg-white rounded-xl shadow-md p-6 min-w-[300px]">
                    <img src="images/products/43ECE2020374684B5E054303DB67C34D.jpg" alt="降噪无线耳机 Pro，黑色设计" class="w-full h-48 object-contain mb-4">
                    <h3 class="text-xl font-semibold">降噪无线耳机 Pro</h3>
                    <p class="text-gray-600 mt-2">主动降噪 | 30小时续航 | 空间音频</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold">¥1999</span>
                        <button class="add-to-cart-btn btn-primary px-6 py-2 rounded-full text-white font-medium"
                                data-id="103" 
                                data-name="降噪无线耳机 Pro" 
                                data-price="1999" 
                                data-image="images/products/43ECE2020374684B5E054303DB67C34D.jpg">
                            购买
                        </button>
                    </div>
                </div>
                
                <!-- 产品卡片 4 - 智能健康手表 4 -->
                <div class="product-card bg-white rounded-xl shadow-md p-6 min-w-[300px]">
                    <img src="images/products/D42F33B4C3FA0F596E78233AB82FFBB9.jpg" alt="智能健康手表 4，黑色表盘和硅胶表带" class="w-full h-48 object-contain mb-4">
                    <h3 class="text-xl font-semibold">智能健康手表 4</h3>
                    <p class="text-gray-600 mt-2">血氧监测 | 心率监测 | 50米防水 | 14天续航</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold">¥1299</span>
                        <button class="add-to-cart-btn btn-primary px-6 py-2 rounded-full text-white font-medium"
                                data-id="104" 
                                data-name="智能健康手表 4" 
                                data-price="1299" 
                                data-image="images/products/D42F33B4C3FA0F596E78233AB82FFBB9.jpg">
                            购买
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 品牌价值主张区域 -->
    <section class="py-16">
        <div class="content-container">
            <h2 class="text-3xl font-bold mb-12 text-center">为什么选择我们</h2>
            
            <div class="grid grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto flex items-center justify-center">
                        <span class="iconify text-3xl text-blue-500" data-icon="mdi:truck-fast"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">快速配送</h3>
                    <p class="text-gray-600 mt-2">全国主要城市当日达</p>
                </div>
                
                <div class="text-center">
                    <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto flex items-center justify-center">
                        <span class="iconify text-3xl text-blue-500" data-icon="mdi:shield-check"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">正品保证</h3>
                    <p class="text-gray-600 mt-2">官方授权，假一赔十</p>
                </div>
                
                <div class="text-center">
                    <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto flex items-center justify-center">
                        <span class="iconify text-3xl text-blue-500" data-icon="mdi:tools"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">专业售后</h3>
                    <p class="text-gray-600 mt-2">7天无理由退换，1年保修</p>
                </div>
                
                <div class="text-center">
                    <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto flex items-center justify-center">
                        <span class="iconify text-3xl text-blue-500" data-icon="mdi:headset"></span>
                    </div>
                    <h3 class="text-xl font-semibold mt-4">客服支持</h3>
                    <p class="text-gray-600 mt-2">7×24小时在线服务</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚区域 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="content-container">
            <div class="grid grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <span class="iconify text-3xl mr-2" data-icon="ion:hardware-chip"></span>
                        <h2 class="text-xl font-bold">TechZone</h2>
                    </div>
                    <p class="text-gray-400">领先的电子设备购物平台，提供最新科技产品与专业服务</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="mobile.html" class="hover:text-white transition-colors">手机</a></li>
                        <li><a href="computer.html" class="hover:text-white transition-colors">电脑</a></li>
                        <li><a href="headphones.html" class="hover:text-white transition-colors">耳机</a></li>
                        <li><a href="wearable.html" class="hover:text-white transition-colors">智能穿戴</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">客户服务</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">配送信息</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">退换政策</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="bg-gray-800 p-2 rounded-full hover:bg-blue-500 transition-colors">
                            <span class="iconify text-xl" data-icon="mdi:weixin"></span>
                        </a>
                        <a href="#" class="bg-gray-800 p-2 rounded-full hover:bg-blue-500 transition-colors">
                            <span class="iconify text-xl" data-icon="mdi:weibo"></span>
                        </a>
                        <a href="#" class="bg-gray-800 p-2 rounded-full hover:bg-blue-500 transition-colors">
                            <span class="iconify text-xl" data-icon="mdi:instagram"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 产品数据库 - 用于搜索功能
        const productsDatabase = [
            // 手机产品
            {
                id: "101",
                name: "旗舰智能手机 X Pro",
                description: "6.7英寸AMOLED屏 | 骁龙8 Gen2 | 1亿像素三摄",
                price: 5999,
                image: "images/products/7031297F1A936F9A0C6B61AE41AB1C4D.jpg",
                category: "手机",
                keywords: ["智能手机", "x pro", "旗舰", "拍照", "骁龙8", "大屏"]
            },
            {
                id: "105",
                name: "智能手机 青春版",
                description: "6.5英寸 | 6400万像素 | 4500mAh电池 | 90Hz刷新率",
                price: 2499,
                image: "https://picsum.photos/seed/phone2/400/400",
                category: "手机",
                keywords: ["智能手机", "青春版", "性价比", "学生", "长续航"]
            },
            {
                id: "106",
                name: "游戏手机 X",
                description: "6.8英寸 | 6400万像素 | 5500mAh电池 | 144Hz刷新率",
                price: 3999,
                image: "https://picsum.photos/seed/phone3/400/400",
                category: "手机",
                keywords: ["游戏手机", "高性能", "高刷新率", "续航", "散热"]
            },
            
            // 电脑产品
            {
                id: "102",
                name: "轻薄笔记本电脑 Air",
                description: "13.3英寸2K屏 | i7处理器 | 16GB内存 | 1TB SSD",
                price: 7999,
                image: "images/products/BB460B0B588041CFD4C93FAD72A68F46.jpg",
                category: "电脑",
                keywords: ["笔记本", "轻薄", "air", "i7", "办公", "长续航"]
            },
            {
                id: "107",
                name: "专业游戏本 Pro",
                description: "17.3英寸144Hz | i9处理器 | RTX 4080 | 32GB内存",
                price: 15999,
                image: "https://picsum.photos/seed/gaminglaptop/400/400",
                category: "电脑",
                keywords: ["游戏本", "专业", "高性能", "i9", "rtx4080", "大屏"]
            },
            
            // 耳机产品
            {
                id: "103",
                name: "降噪无线耳机 Pro",
                description: "主动降噪 | 30小时续航 | 空间音频",
                price: 1999,
                image: "images/products/43ECE2020374684B5E054303DB67C34D.jpg",
                category: "耳机",
                keywords: ["耳机", "无线", "降噪", "pro", "空间音频", "续航"]
            },
            {
                id: "108",
                name: "真无线蓝牙耳机",
                description: "IP54防水 | 24小时续航 | 触控操作",
                price: 799,
                image: "https://picsum.photos/seed/headphonewireless/400/400",
                category: "耳机",
                keywords: ["真无线", "蓝牙", "耳机", "防水", "触控", "运动"]
            },
            
            // 智能穿戴产品
            {
                id: "104",
                name: "智能健康手表 4",
                description: "血氧监测 | 心率监测 | 50米防水 | 14天续航",
                price: 1299,
                image: "images/products/D42F33B4C3FA0F596E78233AB82FFBB9.jpg",
                category: "智能穿戴",
                keywords: ["智能手表", "健康", "防水", "续航", "心率监测", "运动"]
            },
            {
                id: "109",
                name: "智能手环 Pro",
                description: "睡眠监测 | 运动模式 | 7天续航 | 心率监测",
                price: 299,
                image: "https://picsum.photos/seed/smartband/400/400",
                category: "智能穿戴",
                keywords: ["智能手环", "pro", "睡眠监测", "运动", "性价比"]
            }
        ];

        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            // 搜索相关元素
            const searchInput = document.getElementById('search-input');
            const searchBtn = document.getElementById('search-btn');
            const searchModal = document.getElementById('search-modal');
            const closeSearch = document.getElementById('close-search');
            const searchOverlay = document.getElementById('search-overlay');
            const searchTerm = document.getElementById('search-term');
            const searchResultsContainer = document.getElementById('search-results-container');
            const searchResultsCount = document.getElementById('search-results-count');
            const noResults = document.getElementById('no-results');
            const searchSuggestions = document.getElementById('search-suggestions');
            
            // 检查登录状态并更新UI
            updateLoginStatus();
            
            // 初始化购物车计数
            updateCartCount();
            
            // 搜索按钮点击事件
            searchBtn.addEventListener('click', function() {
                performSearch();
            });
            
            // 回车键搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                    // 隐藏搜索建议
                    searchSuggestions.classList.add('hidden');
                }
            });
            
            // 输入框内容变化时显示搜索建议
            searchInput.addEventListener('input', function() {
                const query = this.value.trim().toLowerCase();
                if (query.length < 2) {
                    searchSuggestions.classList.add('hidden');
                    return;
                }
                
                // 获取搜索建议
                const suggestions = getSearchSuggestions(query);
                
                if (suggestions.length > 0) {
                    displaySuggestions(suggestions, query);
                    searchSuggestions.classList.remove('hidden');
                } else {
                    searchSuggestions.classList.add('hidden');
                }
            });
            
            // 点击页面其他地方隐藏搜索建议
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.search-input-container')) {
                    searchSuggestions.classList.add('hidden');
                }
            });
            
            // 关闭搜索弹窗
            closeSearch.addEventListener('click', function() {
                searchModal.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
            });
            
            // 点击遮罩层关闭搜索弹窗
            searchOverlay.addEventListener('click', function() {
                searchModal.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
            });
            
            // 个人中心按钮点击事件
            document.getElementById('profile-btn').addEventListener('click', function() {
                const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
                if (isLoggedIn) {
                    // 已登录，跳转到个人主页
                    window.location.href = 'profile.html';
                } else {
                    // 未登录，跳转到登录页面
                    window.location.href = 'login.html';
                }
            });
            
            // 购物车按钮点击事件
            document.getElementById('cart-btn').addEventListener('click', function() {
                const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
                if (isLoggedIn) {
                    // 已登录，跳转到购物车页面
                    window.location.href = 'cart.html';
                } else {
                    // 未登录，提示登录后查看购物车
                    if (confirm('请先登录查看购物车，是否前往登录？')) {
                        window.location.href = 'login.html';
                    }
                }
            });
            
            // 为所有"购买"按钮添加点击事件
            document.querySelectorAll('.add-to-cart-btn').forEach(button => {
                button.addEventListener('click', function() {
                    addToCartFromButton(this);
                });
            });
            
            // 执行搜索
            function performSearch() {
                const query = searchInput.value.trim().toLowerCase();
                if (!query) return;
                
                // 清空之前的结果
                searchResultsContainer.innerHTML = '';
                
                // 搜索逻辑：匹配名称、描述或关键词
                const results = productsDatabase.filter(product => {
                    const matchesName = product.name.toLowerCase().includes(query);
                    const matchesDescription = product.description.toLowerCase().includes(query);
                    const matchesKeywords = product.keywords.some(keyword => 
                        keyword.toLowerCase().includes(query)
                    );
                    return matchesName || matchesDescription || matchesKeywords;
                });
                
                // 显示搜索结果
                searchTerm.textContent = query;
                searchResultsCount.textContent = `找到 ${results.length} 个结果`;
                
                if (results.length > 0) {
                    noResults.classList.add('hidden');
                    // 生成结果HTML
                    results.forEach(product => {
                        const productCard = document.createElement('div');
                        productCard.className = 'product-card bg-white rounded-xl shadow-md overflow-hidden';
                        productCard.innerHTML = `
                            <div class="p-4">
                                <img src="${product.image}" alt="${product.name}" class="w-full h-40 object-contain mb-3">
                                <div class="text-xs text-gray-500 mb-1">${product.category}</div>
                                <h3 class="font-semibold mb-1">${product.name}</h3>
                                <p class="text-gray-600 text-xs mb-2 line-clamp-2">${product.description}</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-blue-600 font-bold">¥${product.price}</span>
                                    <button class="search-add-to-cart-btn text-xs bg-blue-500 text-white px-3 py-1 rounded-full"
                                            data-id="${product.id}" 
                                            data-name="${product.name}" 
                                            data-price="${product.price}" 
                                            data-image="${product.image}">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        `;
                        searchResultsContainer.appendChild(productCard);
                    });
                    
                    // 为搜索结果中的加入购物车按钮添加事件
                    document.querySelectorAll('.search-add-to-cart-btn').forEach(button => {
                        button.addEventListener('click', function() {
                            addToCartFromButton(this);
                        });
                    });
                } else {
                    noResults.classList.remove('hidden');
                }
                
                // 显示搜索弹窗
                searchModal.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
            }
            
            // 获取搜索建议
            function getSearchSuggestions(query) {
                // 收集所有可能的建议项
                const allPossibleSuggestions = new Set();
                
                productsDatabase.forEach(product => {
                    // 从名称中提取建议
                    if (product.name.toLowerCase().includes(query)) {
                        allPossibleSuggestions.add(product.name);
                    }
                    
                    // 从类别中提取建议
                    if (product.category.toLowerCase().includes(query)) {
                        allPossibleSuggestions.add(product.category);
                    }
                    
                    // 从关键词中提取建议
                    product.keywords.forEach(keyword => {
                        if (keyword.toLowerCase().includes(query)) {
                            allPossibleSuggestions.add(keyword);
                        }
                    });
                });
                
                // 转换为数组并排序，优先匹配度高的
                return Array.from(allPossibleSuggestions)
                    .filter(item => item.toLowerCase().includes(query))
                    .sort((a, b) => {
                        const aIndex = a.toLowerCase().indexOf(query);
                        const bIndex = b.toLowerCase().indexOf(query);
                        return aIndex - bIndex || a.length - b.length;
                    })
                    .slice(0, 5); // 最多显示5个建议
            }
            
            // 显示搜索建议
            function displaySuggestions(suggestions, query) {
                searchSuggestions.innerHTML = '';
                
                suggestions.forEach(suggestion => {
                    const item = document.createElement('div');
                    item.className = 'search-suggestion-item';
                    
                    // 高亮显示匹配的部分
                    const lowerSuggestion = suggestion.toLowerCase();
                    const queryIndex = lowerSuggestion.indexOf(query);
                    
                    if (queryIndex !== -1) {
                        const before = suggestion.substring(0, queryIndex);
                        const match = suggestion.substring(queryIndex, queryIndex + query.length);
                        const after = suggestion.substring(queryIndex + query.length);
                        
                        item.innerHTML = `${before}<span class="search-highlight">${match}</span>${after}`;
                    } else {
                        item.textContent = suggestion;
                    }
                    
                    // 点击建议项进行搜索
                    item.addEventListener('click', function() {
                        searchInput.value = suggestion;
                        performSearch();
                        searchSuggestions.classList.add('hidden');
                    });
                    
                    searchSuggestions.appendChild(item);
                });
            }
        });
        
        // 从按钮添加商品到购物车
        function addToCartFromButton(button) {
            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
            
            if (!isLoggedIn) {
                // 未登录，提示登录后才能购买
                if (confirm('请先登录才能购买商品，是否前往登录？')) {
                    window.location.href = 'login.html';
                }
                return;
            }
            
            // 已登录，添加商品到购物车
            const product = {
                id: button.getAttribute('data-id'),
                name: button.getAttribute('data-name'),
                price: parseFloat(button.getAttribute('data-price')),
                image: button.getAttribute('data-image'),
                quantity: 1
            };
            
            addToCart(product);
        }
        
        // 更新登录状态UI
        function updateLoginStatus() {
            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
            // 可以根据需要更新UI，例如显示用户名等
        }
        
        // 更新购物车商品数量显示
        function updateCartCount() {
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) return;
            
            const user = JSON.parse(localStorage.getItem('user_' + currentUser));
            if (!user || !user.cart) return;
            
            const totalItems = user.cart.reduce((total, item) => total + item.quantity, 0);
            const cartCountElement = document.getElementById('cart-count');
            
            if (totalItems > 0) {
                cartCountElement.textContent = totalItems;
                cartCountElement.classList.remove('hidden');
            } else {
                cartCountElement.classList.add('hidden');
            }
        }
        
        // 添加商品到购物车
        function addToCart(product) {
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) return;
            
            let user = JSON.parse(localStorage.getItem('user_' + currentUser));
            if (!user.cart) {
                user.cart = [];
            }
            
            // 检查商品是否已在购物车中
            const existingItemIndex = user.cart.findIndex(item => item.id === product.id);
            
            if (existingItemIndex !== -1) {
                // 商品已存在，增加数量
                user.cart[existingItemIndex].quantity += 1;
                alert(`${product.name} 已添加到购物车，当前数量: ${user.cart[existingItemIndex].quantity}`);
            } else {
                // 添加新商品
                user.cart.push(product);
                alert(`${product.name} 已添加到购物车`);
            }
            
            // 保存更新后的用户信息
            localStorage.setItem('user_' + currentUser, JSON.stringify(user));
            
            // 更新购物车计数显示
            updateCartCount();
        }
    </script>
</body>
</html>
